<template>
  <section class="page-home">
    <start-pop></start-pop>

    <top-panel></top-panel>

    <!-- handle main display -->
    <main-container
      :room-data="displayedRooms"></main-container>

    <!-- handle actions -->
    <action-container
      :room-data="displayedRooms[4]"></action-container>

    <bottom-panel></bottom-panel>

    <message-pop></message-pop>

    <happen-battle-pop></happen-battle-pop>

    <map-pop></map-pop>

    <!-- <playground-pop></playground-pop> -->
  </section>
</template>

<script>
import eventBus from '@/EventBus'
import SystemConfig from '@/models/config/System'
import RoomConfig from '@/models/config/Room'
import PlayerConfig from '@/models/config/Player'
import ItemConfig from '@/models/config/Item'
import EventConfig from '@/models/config/Event'
import system from '@/models/system'
import player from '@/models/Player'
import { shuffle } from '@/utils/CommonUtil'
import StartPop from '@/components/StartPop'
import TopPanel from '@/components/TopPanel'
import MainContainer from '@/components/MainContainer'
import ActionContainer from '@/components/ActionContainer'
import BottomPanel from '@/components/BottomPanel'
import MessagePop from '@/components/MessagePop'
import HappenBattlePop from '@/components/HappenBattle'
import MapPop from '@/components/MapPop'
// import PlaygroundPop from '@/components/PlaygroundPop'

export default {
  components: {
    StartPop,
    TopPanel,
    MainContainer,
    ActionContainer,
    BottomPanel,
    MessagePop,
    HappenBattlePop,
    MapPop
    // PlaygroundPop
  },

  data () {
    return {
      displayedRooms: [
        { image: '', rotate: 0 },
        { image: '', rotate: 0 },
        { image: '', rotate: 0 },
        { image: '', rotate: 0 },
        { image: '', rotate: 0 },
        { image: '', rotate: 0 },
        { image: '', rotate: 0 },
        { image: '', rotate: 0 },
        { image: '', rotate: 0 }
      ]
    }
  },

  mounted () {
    eventBus.$on('notifyStart', () => {
      this.start()
    })
    eventBus.$on('notifyRedraw', () => {
      this.draw()
    })
    eventBus.$on('notifyShuffleEvents', () => {
      this.shuffleEvents()
    })
  },

  beforeDestroy () {
    eventBus.$off('notifyStart')
    eventBus.$off('notifyRedraw')
    eventBus.$off('notifyShuffleEvents')
  },

  methods: {
    start () {
      this.initData()
      this.draw()
    },
    initData () {
      system.time = 0
      system.events = []
      system.indoors = []
      system.outdoors = []
      system.map = []
      if (player.character === 'fatboy') {
        player.hp = PlayerConfig.baseHp + 4
      } else {
        player.hp = PlayerConfig.baseHp
      }
      player.atk = PlayerConfig.baseAtk
      player.x = 0
      player.y = 0
      player.gotTotem = false
      player.buriedTotem = false
      player.items = []
      if (player.character === 'backpacker') {
        player.maxItems = PlayerConfig.maxItems + PlayerConfig.backpackerExtraItems
        player.items.push(JSON.parse(JSON.stringify(ItemConfig.items.find(i => i.key === 'candle'))))
      } else {
        player.maxItems = PlayerConfig.maxItems
      }
      if (player.character === 'sportgirl') {
        player.items.push(JSON.parse(JSON.stringify(ItemConfig.items.find(i => i.key === 'soda'))))
      } else if (player.character === 'oldman') {
        player.items.push(JSON.parse(JSON.stringify(ItemConfig.items.find(i => i.key === 'gasoline'))))
      } else if (player.character === 'soldier') {
        player.items.push(JSON.parse(JSON.stringify(ItemConfig.items.find(i => i.key === 'grenade'))))
      } else if (player.character === 'boxer') {
        player.items.push(JSON.parse(JSON.stringify(ItemConfig.items.find(i => i.key === 'boxingGloves'))))
      } else if (player.character === 'lumberjack') {
        player.items.push(JSON.parse(JSON.stringify(ItemConfig.items.find(i => i.key === 'chainsaw'))))
      }
      // console.log('player', player)
      this.initRooms()
      this.shuffleEvents(true)
    },
    initRooms () {
      const toShuffleIndoors = []
      RoomConfig.indoors.forEach(r => {
        if (r.key === 'foyer') {
          system.map.push({
            ...r,
            rotate: 0,
            x: 0,
            y: 0,
            where: 'indoor'
          })
        } else {
          toShuffleIndoors.push({
            ...r,
            where: 'indoor'
          })
        }
      })
      system.indoors = shuffle(toShuffleIndoors)
      // console.log(system)
    },
    shuffleEvents (stopTimePass = false) {
      if (!stopTimePass) {
        system.time++
        if (system.time >= SystemConfig.endTime) {
          eventBus.$emit('notifyMessage', {
            message: '午夜12点钟声敲响，游戏结束',
            confirmBtnText: '重新开始',
            tag: {
              source: 'restart'
            }
          })
          return
        }
      }
      const toShuffleEvents = EventConfig.events.map(e => e)
      system.events = shuffle(toShuffleEvents)
      system.events.pop() // discard the first event
      if (player.character !== 'sportgirl') {
        // sport girl moves faster, keep 1 more available event
        system.events.pop() // discard event again
      }
      // console.log(system)
    },
    draw () {
      this.drawRooms()
    },
    drawRooms () {
      this.displayedRooms = [
        { image: '', rotate: 0 },
        { image: '', rotate: 0 },
        { image: '', rotate: 0 },
        { image: '', rotate: 0 },
        { image: '', rotate: 0 },
        { image: '', rotate: 0 },
        { image: '', rotate: 0 },
        { image: '', rotate: 0 },
        { image: '', rotate: 0 }
      ]
      system.map.forEach(r => {
        if (r.x === player.x - 1 && r.y === player.y - 1) {
          this.$set(this.displayedRooms, 0, { ...r })
        } else if (r.x === player.x && r.y === player.y - 1) {
          this.$set(this.displayedRooms, 1, { ...r })
        } else if (r.x === player.x + 1 && r.y === player.y - 1) {
          this.$set(this.displayedRooms, 2, { ...r })
        } else if (r.x === player.x - 1 && r.y === player.y) {
          this.$set(this.displayedRooms, 3, { ...r })
        } else if (r.x === player.x && r.y === player.y) {
          this.$set(this.displayedRooms, 4, { ...r })
        } else if (r.x === player.x + 1 && r.y === player.y) {
          this.$set(this.displayedRooms, 5, { ...r })
        } else if (r.x === player.x - 1 && r.y === player.y + 1) {
          this.$set(this.displayedRooms, 6, { ...r })
        } else if (r.x === player.x && r.y === player.y + 1) {
          this.$set(this.displayedRooms, 7, { ...r })
        } else if (r.x === player.x + 1 && r.y === player.y + 1) {
          this.$set(this.displayedRooms, 8, { ...r })
        }
      })
      // console.log(this.displayedRooms)
    }
  }
}
</script>

<style scoped lang="less">
.page-home {
  position: relative;
}
</style>
